vue-router 2 简易入门

准备工作

webpack-simple版的vue项目初始是没有vue-router的，需要另外安装

新建一个demo项目

vue init webpack-simple demo //一路 Enter + y
cd demo
npm i

安装vue-router

npm i -S vue-router

配置router

新建index.vue组件，路径为/demo/src/page/index.vue
接下来会围绕index.vue作为例子

方案一：直接写入main.js文件中

简单配置如下

// main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
Vue.use(VueRouter);

import index from './page/index.vue'//也可使用下面的懒加载写法
//const index    = (resolve) => require(['./page/index.vue'],resolve)

//路由指向
const routes = [
  { path: '/', component: index }
];
const router = new VueRouter({
  routes: routes,
  mode: 'history',//history模式比较像正常的url，hash模式带有#号
  // mode: 'hash',
});
new Vue({
  el: '#app',
  router,
  render: h => h(App),
});

方案二：新建单独的router文件

建立router.js文件，其与main.js同级

// router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);

import index from './page/index.vue'
//const index    = (resolve) => require(['./page/index.vue'],resolve)

//路由指向
const routes = [
  // { path: '/', redirect: '/index' },
  { path: '/', component: index },
];
export default new VueRouter({
  routes: routes,
  mode: 'history',
  // mode: 'hash',
  // base: __dirname
})

// main.js

import Vue from 'vue'
import router from './router'
import App from './App.vue'

new Vue({
  el: '#app',
  router,
  render: h => h(App),
});

方案三：新建router文件夹下index.js文件

此法也是webpack版vue项目router默认用法

// router/index.js

//与前面的router.js相似，不同处为import的路径
import index from '../page/index.vue'
...

修改App.vue

经过上面的配置，路由匹配到的组件将会渲染到App.vue里的<router-view>标签中

// App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

使用router-link标签

与<a>标签类似，to=“”中即为路由中设置的url，点击此标签链接会将相应的组件渲染到页面中，产生“跳转”的感觉

<router-link to="/index">主页</router-link>

完成

//demo
npm run dev //启动可见index.vue作为首页内容渲染到了网页里

参考列表

使用Vue-Router 2实现路由功能
Getting Started

最后

详尽使用方法可阅读官方文档